<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		<meta name=renderer  content=webkit>

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<!--插件基本框架-->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" />
		
		<!--页面布局样式-->
		<link rel="stylesheet" type="text/css" href="css/swiperStyle.css" />
		
		<!-- ie 兼容性样式 -->
		<link rel="stylesheet" type="text/css" href="../css/jianrong.css" />
		
		<!-- 本页面css -->
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div style="position: relative;" class="orderDetail-wrapper table-wrapper section" v-cloak>

			<div class="orderList-content-wrapper table-content-wrapper noPay">
				<div v-if="!onlyCanlook" class="price-wrapper fboxRow">
					<div class="price-wrapper-content">
						<div class="content-price fboxRow">
							<span class="title">实际支付：</span>
							<span class="unit">¥</span>
							<span class="price">{{handlePayActual()}}</span>
							<span class="salePrice">(已省¥{{salePrice}})</span>
							<i class="linear"></i>
							<div class="popover-wrapper">
								<el-popover placement="bottom" width="300" trigger="hover" >
									<div class="title-wrapper-pop fboxRow">
										<span class="title-pop">优惠详情 (共省¥{{salePrice}}) </span>
									</div>
									<div class="saleInfo-wrapper">
										<div v-for="(item,index) in saleInfoGroup" :key="index" class="saleInfo-item">
											<span class="item-title">{{item.title}}</span>
											<span class="item-desc">省：¥{{item.price}}</span>
										</div>
									</div>
									<div slot="reference" >
										<p style="cursor: pointer;color: #FF9416;">优惠详情<i style="color: #FF9416;margin-left: 5px;" class="icon el-icon-arrow-up"></i></p>
									</div>
								</el-popover>
							</div>

							
						</div>
			
					</div>
					<div class="fboxRow">
						<div class="content-checkbox fboxCenter mr-10">
							 <el-checkbox class="mr-10" v-model="statementChecked"></el-checkbox><span class="text">我已经阅读并同意</span><span class="statement">《衡天云免责声明》</span>
						</div>
						<div @click="handleClickConfirmxiadan" class="yzButton confirmxiadan">确认下单</div>
					</div>
					
				</div>
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">订单管理</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
					<i @click="gotoOrderList" class="icon el-icon-back"></i> 订单详情</span>
					<div class="detailInfoContent">
						<div class="detailInfoContent-item">
							<p class="content">
								订单编号：<span class="val">{{orderInfo.code}}</span>
							</p>
							<p class="content">
								订单状态：<span class="val" v-html="handlestatus(orderInfo)"></span>
							</p>
						</div>
						<div class="detailInfoContent-item">
							<p class="content">
								创建时间：<span class="val"> {{orderInfo.createTime}}</span>
							</p>
							<p class="content">
								支付剩余时间：<span class="val">{{timeInfo.hour}}：{{timeInfo.minite}}：{{timeInfo.second}}</span>
							</p>
						</div>
						<div class="detailInfoContent-item">
							<p class="content">
								订单金额：<span class="val"> {{orderInfo.price}}元</span>
							</p>
							<p class="content">
                                订单类型：<span style="color: #6462F3;" class="val">{{orderInfo.orderType}}</span>
							</p>
						</div>
					</div>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title" style="padding-bottom: 0px;">
						配置详情</span>
						<span class="changeConfig">更改配置>></span>
					</div>
					 <el-table
						ref="refTable"
					    :data="tableData"
					    style="position: relative;">
					    <el-table-column type="expand" class="">
					      <template slot-scope="props">
							  <i class="table-flag"></i>
							  <div class="yzTable-wrapper">
									<div class="th-wrapper  fboxRow">
										<div class="th-item">产品类型</div>
										<div class="th-item">名称/ID</div>
										<div class="th-item config">产品配置</div>
										<div class="th-item">购买周期</div>
										<div class="th-item">购买数量</div>
										<div class="th-item">费用</div>
									</div>
									<div class="tr-wrapper fboxRow">
										<!--产品类型  -->
										<div class="tr-item">{{props.row.type}}</div> 
										<!-- 名称/ID  -->
										<div class="tr-item">
											<p>{{props.row.name}}</p>
											<p style="margin-top: 10px;display: inline-block;">ID:{{props.row.id}}</p>
										</div>
										<!-- 产品配置 -->
										<div class="tr-item config">
											<el-row>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">产品名称：</span>
														<span class="config-val">{{props.row.name}}</span>
													</div>
												
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">ID：</span>
														<span class="config-val">{{props.row.id}}</span>
													</div>
												</el-col>
												
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">地域：</span>
														<span class="config-val">{{props.row.area}}</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">IP：</span>
														<span class="config-val">{{props.row.ipNum}}个</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">CPU：</span>
														<span class="config-val">{{props.row.cpNum}}核</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">数据盘：</span>
														<span class="config-val">{{props.row.dataDisk}}G</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">内存：</span>
														<span class="config-val">{{props.row.memory}}G</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">带宽：</span>
														<span class="config-val">{{props.row.bindWith}}M</span>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="config-wrapper">
														<span class="config-title">SSD：</span>
														<span class="config-val">{{props.row.ssd}}</span>
													</div>
												</el-col>
												<el-col :span="16">
													<div class="config-wrapper">
														<span class="config-title">操作系统：</span>
														<span class="config-val">{{props.row.systemMirror}}</span>
													</div>
												</el-col>
											</el-row>
										</div>
										<!-- 购买周期 -->
										<div class="tr-item">
											<span> {{props.row.buyTimePeriod}}</span>
										</div>
										<!-- 购买数量 -->
										<div class="tr-item">
											<p>{{props.row.buyNum}}台</p>
										</div>
										<!-- 费用 -->
										<div class="tr-item">
											<span> ¥{{Number(props.row.price).toFixed(2)}}</span>
										</div>
									</div>
							  </div>
					      </template>
					    </el-table-column>
					    <el-table-column
					      label="产品类型"
					      prop="type">
					    </el-table-column>
					    <el-table-column
					      label="名称/ID"
					      prop="name">
						  <template slot-scope="scope">
							  <p>{{scope.row.name}}</p>
							  <p style="margin-top: 10px;display: inline-block;">ID:{{scope.row.id}}</p>
						  </template>
					    </el-table-column>
						
						<el-table-column
						  label="产品配置"
						  width="300"
						  >
						  <template slot-scope="scope">
							  <p class="extand configInfo">
								  cpu：{{scope.row.cpNum}}核 内存：{{scope.row.memory}}G SSD：{{scope.row.SSD}}G IP数：{{scope.row.ipNum}}个
							  </p>
						  	 <span class="extand detailButton" @click="expandtableRow(scope.row)">详情</span>
						  </template>
						</el-table-column>
						
					    <el-table-column
					      label="购买周期"
					      prop="buyTimePeriod">
						   <template slot-scope="scope">
							   {{scope.row.buyTimePeriod}}
							</template>
					    </el-table-column>
						<el-table-column
						  label="购买数量"
						  prop="buyNum">
						   <template slot-scope="scope">
							   {{scope.row.buyNum}}台
							</template>
						</el-table-column>
						<el-table-column
						  label="费用"
						  prop="price">
						   <template slot-scope="scope">
							   ¥{{Number(scope.row.price).toFixed(2)}}
							</template>
						</el-table-column>
					  </el-table>

				</div>
				<div v-if="!onlyCanlook" class="form-wrapper" style="margin-bottom: 33px;">
					<div class="from-title-wrapper ticket">
						<el-checkbox @change="changeUseTicket" v-model="isOpenTicket">使用优惠券/优惠码抵扣</el-checkbox>
						<p class="">已抵扣 <span class="ticketMoney">{{salePrice}}</span> 元</p>
					</div>
					<div v-if="isOpenTicket" class="yz-tab-wrapper mt-20">
						<div :class="{'active': saleType === 0}"  @click="handleClickTabChangeSaleType(0)" class="yz-tab-item">优惠券<span v-if="saletickGroup.length && saletickGroup.length > 0">( {{saletickGroup.length}} )</span></div>
						<div :class="{'active': saleType === 1}"  @click="handleClickTabChangeSaleType(1)" class="yz-tab-item">优惠码</div>
					</div>
					
					
					
					
					
<div v-show="isOpenTicket && saleType === 0" class="swiper-container-solution" :class="{'hide': saletickGroup.length && saletickGroup.length < 6}">
	<div class="selected-solution">
		<div class="" style="position: relative;">
<!-- 			<i class="swiper-container-linear left" ></i>
			<i class="swiper-container-linear right" ></i> -->
			<div class="swiper-container">

				<div class="solution-cardlist swiper-wrapper">
					
					<div  v-for="(item,index) in saletickGroup" :key="index" class="col-sm-4 swiper-slide">
						<div class="solution-card"  @click="handleClickTicket(item)" :class="{'active': item.id === selectSaletick}">
							<div v-if="item.sill" class="flag fboxCenter">无门槛</div>
							<img src="img/coupon-select.png" v-if="item.id === selectSaletick" class="selectImg"/>
							<p class="title">{{item.title}}</p>
							<p class="price"><span class="unit">¥ </span>{{item.price}}<span v-if="item.num > 0" class="tickNum"> x{{item.num}}张</span></p>
							<div class="canUseTime">有效期至{{item.canUseTime}}</div>
						</div>
					</div>
				</div>
				<div :class="{'hide': saletickGroup.length && saletickGroup.length < 6}" class="swiper-pagination solution-pagination"></div>
			</div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</div>

<div v-show="isOpenTicket && saleType === 1" class="saleCode-wrapper">
	<div class="input-wrapper fboxRow">
		<el-input
		class="mr-20"
			maxlength="50"
			class="mr-10"
			style="width: 200px"
		    placeholder="请输入优惠码"
		    v-model="salecode">
		  </el-input>
		  <div @click="confirmSalecode" :class="{'active':salecode !== undefined  && salecode !== null &&  salecode !== ''}" class="yzButton salecode">确定</div>
	</div>

</div>
				<div class="payMethod-wrapper  fboxRow">
					<span class="title">付款方式</span>
					<div class="img-elinput-wrapper">
						<div class="img-wrapper  fboxCenter">
							<img  :src="getPayMethod()" />
						</div>
						<el-select v-model="selectpayMethod">
								<el-option
								  v-for="item in payMethodOptions"
								  :key="item.id"
								  :label="item.label"
								  :value="item.id">
								</el-option>
						</el-select>
					</div>
				</div>


				</div>
			</div>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 兼容性判断逻辑
			var  isFastModel // 是否为兼容模式
			
			if(window.navigator.userAgent.indexOf('AppleWebKit') != -1) {
				// 当前为急速模式
				isFastModel = true
			}else {
				isFastModel = false
			}
			
			
			
			$(function() {
				new Swiper(".swiper-container", {
				
					//默认功能属性
					speed: 250,
					slidesPerView: isFastModel ? 'auto' : '5', // 一页展示多少个
					// spaceBetween: 0,
					slidesPerGroup: 5, // 多少为一组
					loop: false,
					autoplay: false,          
					observer:true,//修改swiper自己或子元素时，自动初始化swiper
					observeParents:true,//修改swiper的父元素时，自动初始化swiper
					
					//分页索引
					pagination: {
						el: ".swiper-pagination",
						clickable: true
					},
					
					//分页按钮
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev"
					}
		
				});
			})
		</script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderDetail-wrapper',
				data: function() {
					return {
						onlyCanlook: false, // 是否只能进行查看操作  当为状态为取消  或  已支付 时  应该设置为true
						orderInfo:{
							id: '12345738',
							code:'cor-5fa4b1b0e050e6-1',// 订单编号
							createTime: '2020-11-25  11:24:46', // 创建时间
							status:'alredyPay',
							orderType: '新购', // 订单类型
							price:'1500.50', // 订单金额
							surplusTime: '04：23：59'
						},
						  tableData: [{
							      price:2000.93,
								  buyTimePeriod:'6个月',
								  buyNum:1, // 购买数量
						          id: '123ghafsGZf145',
						          name: '江先生', // 名称
								  type:'虚拟主机', // 产品类型
								  area:'香港',// 地域
								  cpNum:3, // cpu 核心数
								  memory:50, // 内存
								  ipNum:1, // IP个数
								  dataDisk:100, // 数据盘
								  bindWith:100, // 带宽
								  ssd:50, //SSD
								  systemMirror:'Centons 1.0',//镜像 
								 expireTime: '2020-12-31', // 到期时间
									expireDay:14, // 距离到期时间
								}
								],
								isOpenTicket: true, // 是否使用优惠券 优惠码
								saleType:0, // 优惠的形式  0 为优惠券  1为优惠码
								selectSaletick: undefined, // 被选中的优惠券 的Id
								saletickGroup:[{ // 优惠券组
									title:'满2000立减',
									id: '2230',
									price:'100',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
									
								},{ // 优惠券组
									title:'满2000立减',
									id: '2231',
									price:'110',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2232',
									price:'120',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2233',
									price:'130',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2234',
									price:'140',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2235',
									price:'150',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2236',
									price:'160',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2237',
									price:'170',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2238',
									price:'180',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2239',
									price:'190',
									num: 2,
									canUseTime: '2021-04-01',
									sill: true,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2240',
									price:'200',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2241',
									price:'210',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2242',
									price:'220',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2243',
									price:'230',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2244',
									price:'240',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								},{ // 优惠券组
									title:'满2000立减',
									id: '2245',
									price:'250',
									num: 2,
									canUseTime: '2021-04-01',
									sill: false,  // sill 为 true 表示无门槛
								}],
								salecode:undefined, // 优惠码
								salePrice:0, // 已抵扣价格
								
								payMethodOptions:[{ // 支付方式
									label:'云闪付/银行在线转账',
									value: 'cloudPay',
									id:0
								},{
									label:'测试支付1',
									value: 'test1',
									id:1
								},{
									label:'测试支付2',
									value: 'test2',
									id:2
								}],
								selectpayMethod:undefined,  // 选中的支付方式id
								statementChecked:false, // 是否勾选声明
								saleInfoGroup:[], // 优惠详情列表  默认为空
								timeInfo:{ // 距离支付结束时间
									hour: '00',
									minite: '00',
									second: '00'
								}
					}
				},

				methods: {
					// 处理倒计时时间的方法
					handleTime: function() {
						let nowDate = new Date()
						let newDate = nowDate.getTime() + 1000 * 60 * 60 * 4// 4小时
						
						
						var t = Math.floor((newDate - nowDate) / 1000)
						
						let secKillTimer = null
						let that = this
						secKillTimer = setInterval(function() {
							t--;
							//时间到期继续下一个循环 所有不需要停止计时器
							if(t<0 || t === 0) {
								that.timeInfo.hour = 0
								that.timeInfo.minite = 0
								that.timeInfo.second = 0
								
								clearInterval(secKillTimer)
								that.handleTime()
							}
							let h = Math.floor(t % 86400 / 3600)
							let m = Math.floor(t % 3600 / 60)
							let s = Math.floor(t % 60)
							
					
							
							that.timeInfo.hour = h.toString()
							that.timeInfo.minite = m.toString()
							that.timeInfo.second = s.toString()
							// topad 补足0 在ie模式下  失效  所以采用js 
							if(that.timeInfo.hour.toString().length < 2) {
								that.timeInfo.hour = '0' + that.timeInfo.hour.toString()
							}
							
							// topad 补足0 在ie模式下  失效  所以采用js
							if(that.timeInfo.minite.toString().length < 2) {
								that.timeInfo.minite = '0' + that.timeInfo.minite.toString()
							}
							// topad 补足0 在ie模式下  失效  所以采用js
							if(that.timeInfo.second.toString().length < 2) {
								that.timeInfo.second = '0' + that.timeInfo.second.toString()
							}
					
						}, 1000)
					},
					
					// 处理实际支付价格
					handlePayActual: function() {
						let oldPrice = Number(this.orderInfo.price)
						let salePrice = Number(this.salePrice) 
						
						let actualPrice = oldPrice -  salePrice
						
						return actualPrice.toFixed(2)
					},
					
					// 点击确认下单
					handleClickConfirmxiadan:_throttle(function(){
						console.log('点击确认下单')
						if(!this.statementChecked) {
							this.$message.error('请阅读并同意声明后，再下单');
						}
					}),
					
					// 改变是否使用劵
					changeUseTicket:function(e) {
						// 取消使用用劵
						if(e ===  false) {
							// 初始化
							this.salePrice = 0
							this.salecode = undefined
							this.selectSaletick = undefined
							this.saleInfoGroup = []  // 优惠详情列表初始化
						}
					},
					// 获取支付方式图片
					getPayMethod: function() {
						// 这里写图片的地址逻辑
						return '../img/pay01.png'
					},
					// 点击优惠券的方法
					handleClickTicket:function(item) {
						this.selectSaletick = item.id
						this.salePrice = Number(item.price).toFixed(2) 
						this.saleInfoGroup = [item]
						
					},
					// 确认输入优惠码
					confirmSalecode:_throttle(function() {
						if(this.salecode === undefined  || this.salecode === null) {
							// 不允许点击状态
							return
						}
						console.log('这里要写检验条件 如果没通过  则打印错误')
						if(this.salecode === '杨洲') {
							// 通过校验
							console.log('这里的抵扣价格是测试数据')
							this.salePrice = 60  //
							this.salePrice =  Number(this.salePrice).toFixed(2) 
							this.saleInfoGroup = [{
								title:'优惠码测试',
								id: '333',
								price:'60.00',
								num: 2,
								canUseTime: '2021-04-01',
								sill: false,  // sill 为 true 表示无门槛
							}]
						}else {
							// 没有通过校验
							this.$message.error('优惠码没有通过校验');
						}
					}),
					
					// 改变优惠Type   0 优惠券 1 优惠码
					handleClickTabChangeSaleType: function(key) {
						// 重复点击
						if(this.saleType === key) {
							return
						}
						
						this.saleType = key
						this.salePrice = 0
						// 优惠信息清空
						this.saleInfoGroup = []
						// 当为优惠码时  优惠券选中 为空
						if(key === 1) {
							this.selectSaletick = undefined
						}else {
							// 当为优惠券时 优惠码为空
							this.salecode = undefined
						}
					},
					
				
					
					// 扩展行的方法
					expandtableRow:_throttle(function(row) {
						 this.$refs.refTable.toggleRowExpansion(row)
					}),
					// 点击返回到工单列表页
					gotoOrderList: _throttle(function() {
						window.open('index.html', '_self')
					}),
					//处理状态
					handlestatus: function(row) {
						//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
						switch (row.status) {
							case 'noPay':
								return '<span style="color:#FF9416">未支付</span>'
							case 'alredyPay':
								return '<span style="color:#3FBF70">已支付</span>'
							case 'alreadyCancel':
								return '<span>已取消</span>'
							default:
								break;
						}
					
					},

				},
				mounted: function() {
					// 支付方式 默认为第一个
					if(this.payMethodOptions.length > 0) {
						this.selectpayMethod = this.payMethodOptions[0].id
						console.log(this.selectpayMethod)
					}
					
					// 距离活动到期的时间
					// 应该是获取到时间戳  再执行该方法
					this.handleTime()
				}

			})
		</script>
	</body>
</html>
